// 触发距离
let distance = 10
// 定义鼠标悬停样式
const CURSORTYPE = {
    top: 'n-resize',
    bottom: 's-resize',
    left: 'w-resize',
    right: 'e-resize',
    right_top: 'ne-resize', // right_top写法是便于后面代码数据处理
    left_top: 'nw-resize',
    left_bottom: 'sw-resize',
    right_bottom: 'se-resize',
    default: 'default',
  };
let positionType = 'default'
// 判断边距是否小于5
const isPermitHanlder = (event,element)=>{
    return event.offsetX > distance && event.offsetY > distance &&  (element.clientHeight - event.offsetY) > distance && (element.clientWidth - event.offsetX) > distance
}
// 获取移入位置
const getCurseKey = (event,element)=> {
    if(event.offsetY<distance&&event.offsetX<distance){
        return 'left_top'
    }
    else if(event.offsetX>distance && element.clientWidth - event.offsetX>distance && event.offsetY<distance){
        return 'top'     
    }
    else if(event.offsetX>distance && element.clientWidth - event.offsetX <distance && event.offsetY<distance){
        return 'right_top'  
    }
    else if(element.clientWidth - event.offsetX <distance && event.offsetY>distance && element.clientHeight - event.offsetY >distance){
        return 'right' 
    }
    else if(element.clientWidth - event.offsetX < distance && element.clientHeight - event.offsetY <distance){
        return 'right_bottom'
    }
    else if(element.clientWidth - event.offsetX >distance && event.offsetX>distance && element.clientHeight - event.offsetY <distance){
        return 'bottom'
    }
    else if(event.offsetX<distance && element.clientHeight - event.offsetY<distance){ 
        return 'left_bottom'
    }
    else if(event.offsetX<distance && event.offsetY>distance && element.clientHeight - event.offsetY>distance){
        return 'left'
    }
    else{
        return 'default'
    }
}
const resizeable = {
    mounted(el, binding, vNode) {//组件拉伸，移动位置
        
        el.addEventListener('mousemove', (e)=> {
            // 获取鼠标移入位置
            positionType = getCurseKey(e,el)
            // 改变移入样式
            el.style.cursor = CURSORTYPE[positionType] || 'default' + '!important'
        })
      },
}

export default resizeable